<template>
  <div style="padding: 16px">
    <el-row
      type="flex"
      justify="end"
    >
      <el-button
        size="mini"
        type="primary"
        @click="dialogVisible = true"
        style="margin-bottom: 16px"
      >新增Mod</el-button>
    </el-row>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        label="贴图"
        width="180"
      >
        <template slot-scope="scope">
          <img
            :src="domain + scope.row.src"
            alt
            width="48"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
      > </el-table-column>
      <el-table-column
        prop="type"
        label="类别"
        width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.type | type }}
        </template>
      </el-table-column>
      <el-table-column
        prop="developer"
        label="开发者"
      > </el-table-column>
      <el-table-column label="资料类别">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="goTag(scope.$index, scope.row)"
          >标签修改</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="info"
            @click="goDetail(scope.$index, scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteItem(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增Mod弹窗 -->
    <el-dialog
      title="新增Mod"
      :visible.sync="dialogVisible"
      :before-close="reset"
      :close-on-click-modal="false"
      width="40%"
    >
      <el-form
        :model="form"
        ref="modForm"
      >
        <el-form-item
          label="Mod贴图"
          :label-width="formLabelWidth"
          prop="src"
        >
          <ossUpload
            :imageUrl="form.src ? domain + form.src : ''"
            :imgName="randomName"
            @upload-img="handler"
          ></ossUpload>
        </el-form-item>
        <el-form-item
          label="名称"
          :label-width="formLabelWidth"
          prop="name"
          placeholder="请输入mod名称"
        >
          <el-input
            v-model="form.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="类别"
          :label-width="formLabelWidth"
          prop="type"
          placeholder="请选择类别"
        >
          <el-select
            v-model="form.type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="开发者"
          :label-width="formLabelWidth"
          prop="developer"
        >
          <el-input
            placeholder="开发者常用昵称，如果是团队用逗号分隔"
            v-model="form.developer"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="简介"
          :label-width="formLabelWidth"
          prop="introduce"
        >
          <el-input
            placeholder="最好能用一句话说明白mod用途和功能，不超过20个字"
            type="textarea"
            v-model="form.introduce"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="
            dialogVisible = false;
            this.$refs.modForm.resetFields();
          ">取 消</el-button>
        <el-button
          type="primary"
          @click="createMod"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import md5 from "md5-js";
import ossUpload from "@/components/ossUpload.vue";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      formLabelWidth: "70px",
      form: {
        src: "",
        name: "",
        type: "",
        developer: "",
        introduce: "",
      },
      options: [
        {
          value: "1",
          label: "综合（类似棱镜和神话书说的大型mod）",
        },
        {
          value: "2",
          label: "人物",
        },
        {
          value: "3",
          label: "自身增强（装备，道具等）",
        },
        {
          value: "4",
          label: "环境（包含特殊地形，生物等）",
        },
        {
          value: "5",
          label: "工具（类似行为学）",
        },
        {
          value: "6",
          label: "其它",
        },
      ],
    };
  },
  activated() {
    this.fetchData();
  },
  watch: {
    "$store.state.version": function () {
      this.fetchData();
    },
  },
  computed: {
    randomName() {
      let time = new Date();
      return md5(time);
    },
  },
  filters: {
    type(val) {
      let hashMap = {
        1: "综合",
        2: "人物",
        3: "自身增强",
        4: "环境",
        5: "工具",
        6: "其它",
      };
      return hashMap[val];
    },
  },
  methods: {
    goTag(index, row) {
      this.$router.push({
        path: "/modTag",
        query: {
          id: row._id,
        },
      });
    },
    goDetail(index, row) {
      this.$router.push({
        path: "/modEdit",
        query: {
          id: row._id,
        },
      });
    },
    handler(src) {
      this.form.src = src;
    },
    async fetchData() {
      let res = await this.axios("/mods", {
        params: {
          version: this.$store.state.version,
        },
      });
      this.tableData = res.data;
    },
    deleteItem(index, row) {
      this.$confirm("此操作将永久删除该mod, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.axios.post("/mods/delete", {
            id: row._id,
          });
          if (res.data.code != 0) {
            return this.$message({
              type: "info",
              message: "删除失败",
            });
          }
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reset(done) {
      this.$refs.modForm.resetFields();
      done();
    },
    async createMod() {
      let res = await this.axios.post("/mods/add", {
        version: this.$store.state.version,
        ...this.form,
      });
      if (res.data.code == 0) {
        this.$message.success("mod新建成功！");
        this.fetchData();
      } else {
        this.$message.error("新建失败！");
      }
      this.$refs.modForm.resetFields();
      this.dialogVisible = false;
    },
  },
  components: {
    ossUpload,
  },
};
</script>

<style>
</style>